<!--
 * @Author: Bobby
 * @Date: 2022-03-07 09:58:50
 * @LastEditTime: 2022-03-24 12:00:35
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\basic\uiSplitpanes\uiSplitpanes.vue
 * @CIMC-V2
-->
<template>
  <VuiSplitpanes
    :id="'uiSplitpanes_' + info._id"
    :ref="info._id"
    v-ui-ref="vSetRef"
    class="default-theme"
    :class="'VuiSplitpanes_' + info._id"
    :disabled="getNoDragging"
    :horizontal="info.extension.horizontal.value"
    :style="{ height: height + 'px' }"
    @resize="resize"
    @resized="resized"
  >
    <template v-for="(item, index) in info.list" :key="index">
      <VuiPane v-if="index === 0 || (index === 1 && !hasExpand2)" class="p-1 pb-0" :size="getSize(index)">
        <div v-if="index == 0 && info.extension.hasExpand.value" class="relative">
          <div class="expand-icons cursor-pointer absolute top-0 right-0 z-50" :class="[hasExpand ? 'scaleX' : '']" @click="clickExpand(index)">
            <svg class="icon" height="20" viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M272.9 512l265.4-339.1c4.1-5.2 0.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3c-9.1 11.6-9.1 27.9 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512z"
                fill="#3270FF"
              />
              <path
                d="M576.9 512l265.4-339.1c4.1-5.2 0.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3c-9.1 11.6-9.1 27.9 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z"
                fill="#3270FF"
              />
            </svg>
          </div>
          <div v-if="hasExpand" class="w-full relative top-6 flex justify-center">
            <span class="text-xs" style="color: rgb(50, 112, 255); width: 14px">{{ translateTitle('Ve.elements.展开') }}</span>
          </div>
        </div>
        <template v-if="index == 0">
          <VuiSplitpanes>
            <VuiPane>
              <Widget v-show="!hasExpand" :list="item.list" />
            </VuiPane>
            <VuiPane v-if="info.showCustomPage && info.customPageInfo.pagePosition === 'A'">
              <div class="relative h-full w-full">
                <a
                  class="closeButton absolute p-0.5 bg-gray-100 rounded-full cursor-pointer z-2 hover:bg-red-400 hover:text-white"
                  @click="closeLayer"
                >
                  <vui-icon icon="close-line" />
                </a>
                <Widget :list="info.customPageInfo.pageInfo.pageModules" />
              </div>
            </VuiPane>
          </VuiSplitpanes>
        </template>

        <div v-if="index == 1 && info.extension.hasExpand.value && getPaneBClose" class="relative">
          <a
            v-if="!hasExpand2"
            class="absolute top-0 right-0 p-0.5 bg-gray-100 rounded-full cursor-pointer z-2 hover:bg-red-400 hover:text-white"
            @click="hasExpand2 = true"
          >
            <vui-icon icon="close-line" />
          </a>
        </div>
        <template v-if="index == 1">
          <VuiSplitpanes class="default-theme sub_splitpanes_box" :horizontal="false" @resized="subResized">
            <!-- :size="getSize2(0)" -->
            <VuiPane>
              <div v-if="index == 1 && info.extension.hasExpand.value && expandPanel" class="relative">
                <!-- <div class="expand-icons cursor-pointer absolute top-0 right-0 z-50" :class="[hasExpand2 ? 'scaleX' : '']" @click="clickExpand(index)">
                <svg class="icon" height="20" viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M272.9 512l265.4-339.1c4.1-5.2 0.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3c-9.1 11.6-9.1 27.9 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512z"
                    fill="#8a8a8a"
                  />
                  <path
                    d="M576.9 512l265.4-339.1c4.1-5.2 0.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3c-9.1 11.6-9.1 27.9 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z"
                    fill="#8a8a8a"
                  />
                </svg>
              </div> -->
              </div>
              <Widget v-show="!hasExpand2" :list="item.list" />
            </VuiPane>
            <slot></slot>
            <VuiPane v-if="info.showCustomPage && info.customPageInfo.pagePosition === 'B'">
              <div class="relative h-full w-full">
                <a
                  class="closeButton absolute p-0.5 bg-gray-100 rounded-full cursor-pointer z-2 hover:bg-red-400 hover:text-white"
                  @click="closeLayer"
                >
                  <vui-icon icon="close-line" />
                </a>
                <Widget :list="info.customPageInfo.pageInfo.pageModules" />
              </div>
            </VuiPane>
          </VuiSplitpanes>
        </template>
      </VuiPane>
    </template>
  </VuiSplitpanes>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent, defineAsyncComponent } from 'vue'
  import { UiMixin, RefsInjectMixin } from '@ve/mixin'
  import throttle from 'lodash/throttle'
  import { domHeight, getBody } from '@ve/utils/domHeight'
  import { componentId } from '@/utils/unique'
  import jQuery from 'jquery'
  export default defineComponent({
    name: 'UiSplitpanes',
    components: {
      // 使用异步组件
      Widget: defineAsyncComponent(() => import('@ve/components/widget.vue')),
    },
    mixins: [UiMixin, RefsInjectMixin],

    data() {
      return {
        height: 400,
        hasExpand: false,
        splitpanesWdith: 0,
        hasExpand2: false,
        expandPanel: false,
      }
    },
    computed: {
      getExtensionHasExpand() {
        return this.info.extension.hasExpand.value
      },
      getNoDragging() {
        return (this.info.extension.noDragging && this.info.extension.noDragging.value) || false
      },
      getPaneBClose() {
        return this.info.extension.paneBClose && this.info.extension.paneBClose.value
      },
    },
    created() {
      // if (this.hasPreview) {
      this.$sub(`SplitpaneHide`, () => {
        if (this.info.extension.hasExpand.value) {
          this.hasExpand = false
          this.hasExpand2 = false
        }
        this.expandPanel = false
      })
      this.$sub(`SplitpaneSubHide`, () => {
        let _splitpanes = jQuery(`.view-show #uiSplitpanes_${this.info._id}`).parents('.splitpanes')
        //解决分割面板在第5层后的问题
        if (_splitpanes.length >= 4) {
          this.hasExpand = false
        }
      })

      this.$sub(`SplitpaneResized_${this.previewPageId()}`, () => {
        this.initSize(10)
        // if (this.info.extension.hasExpand.value) {
        //   this.initSize(10)
        // }
      })
      this.$sub(`HasSubPageShow`, (flag) => {
        if (flag && flag[0]) {
          this.expandPanel = (flag && flag[0]) || false
        }
      })
      // } else {
      if (!this.hasPreview) {
        this.info.list.forEach((row) => {
          if (!row._id) {
            row._id = `splitpanes_${componentId(6)}`
          }
        })
      }

      // }
    },
    mounted() {
      // this.$nextTick(() => {
      //   this.initSize(1)
      // })
      this.initSize(200, this.$pub(`SplitpaneResized_${this.previewPageId()}`))
      window.onresize = () => {
        // this.initSize(200)
        this.$pub(`SplitpaneResized_${this.previewPageId()}`)
      }
    },
    methods: {
      translateTitle,
      initSize(time, cbll) {
        setTimeout(() => {
          let _domHeight = domHeight(this)
          if (_domHeight > 0) {
            this.height = _domHeight
          }

          let _dom = getBody(this).find(`.VuiSplitpanes_${this.info._id}`)
          if (_dom && _dom.length > 0) {
            this.splitpanesWdith = _dom[0].clientWidth
          }
          cbll && cbll()
        }, time)
      },
      sizes() {
        let sizes = [50, 50]
        if (this.info.extension.sizes.value === 1) {
          sizes = [20, 80]
        }
        if (this.info.extension.sizes.value === 2) {
          sizes = [50, 50]
        }
        if (this.info.extension.sizes.value === 3) {
          sizes = [30, 70]
        }
        if (this.info.extension.sizes.value === 4) {
          sizes = [40, 60]
        }
        if (this.info.extension.sizes.value === 5) {
          sizes = [60, 40]
        }
        if (this.info.extension.sizes.value === 6) {
          sizes = [70, 30]
        }
        if (this.info.extension.sizes.value === 7) {
          sizes = [80, 20]
        }
        if (this.info.extension.sizes.value === 8) {
          sizes = [45, 55]
        }
        return sizes
      },
      getSize(index) {
        const sizes = this.sizes()
        if (this.hasExpand) {
          let _percentage = this.convertToPercentage(30)
          if (index == 0) {
            return _percentage
          } else {
            return sizes[index] + sizes[0] - _percentage
          }
        } else {
          return sizes[index]
        }
        // return sizes[index]
      },
      getSize2(index) {
        const sizes = this.sizes()
        if (this.hasExpand2) {
          let _percentage = this.convertToPercentage(30)
          if (index == 0) {
            return _percentage
          } else {
            return sizes[1] + sizes[1] - _percentage
          }
        } else {
          return sizes[index]
        }
        // return sizes[index]
      },
      //转换成百分比
      convertToPercentage(pxNum) {
        let percentage = (100 / this.splitpanesWdith) * pxNum
        return Math.round(percentage)
      },
      clickExpand(type) {
        this.initSize(0)
        if (type === 0) {
          this.hasExpand = !this.hasExpand
        } else {
          this.hasExpand2 = !this.hasExpand2
          this.$pub(`SplitpaneResizedClick`, this.hasExpand2)
        }
        this.$pub(`SplitpaneResized_${this.previewPageId()}`, true)
      },
      resize: throttle(function (data) {
        if (this.getExtensionHasExpand) {
          if (data[0].size <= 4) {
            this.hasExpand = true
          }
          if (data[0].size >= 6) {
            this.hasExpand = false
          }

          this.$pub(`SplitpaneResized_${this.previewPageId()}`, true)
        }
      }, 800),
      resized: throttle(function () {
        this.$pub(`SplitpaneResized_${this.previewPageId()}`, true)
      }, 800),
      subResized: throttle(function (data) {
        // if (this.getExtensionHasExpand) {
        if (data[0].size <= 4 && data[0].size !== 0) {
          this.hasExpand2 = true
        }
        if (data[0].size >= 6) {
          this.hasExpand2 = false
        }

        this.$pub(`SplitpaneResized_${this.previewPageId()}`, true)
        // }
      }, 800),
      $show(num) {
        this.showOrHidePanel(num, false)
      },
      $hide(num) {
        this.showOrHidePanel(num, true)
      },
      showOrHidePanel(num, showFlag) {
        this.initSize(800)
        //初始化num
        num = num || 1
        //判断隐藏或显示A面板还是B面板
        switch (num) {
          case 1:
            this.hasExpand = showFlag
            break
          case 2:
            this.hasExpand2 = showFlag
            break
          case 3:
            this.hasExpand = showFlag
            this.hasExpand2 = showFlag
            break
        }
      },
      closeLayer() {
        let layerInfo = this.$store.getters['preview/getDeepModelOrLayerInfo']({
          type: 2,
          id: this.info.customPageInfo.parentPageId,
        })
        // console.log('关闭', layerInfo.subPage.info)
        layerInfo.hasSubPageShow = false

        layerInfo.data = {}
        if (layerInfo.subPage.info.data) {
          layerInfo.subPage.info.data.requestData = {}
        }

        layerInfo.subPage.info = {}
        this.info.showCustomPage = false
      },
    },
  })
</script>
<style lang="scss" scoped>
  .expand-icons i {
    font-size: 20px;
    position: relative;
    color: #777;
  }
  .scaleX {
    transform: scaleX(-1);
  }

  :deep() {
    .closeButton {
      top: 4px;
      right: 28px;
    }
  }
</style>
